<template>
  <!-- 上方菜单 -->
  <div class="menus">
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-button @click="bucketVisible = true">{{ bucketInfo.info }}</el-button>
        </el-form-item>
        <el-form-item>
          <ElInput v-model="queryInfo.fileinfo" placeholder="文件描述模糊查询"></ElInput>
        </el-form-item>
        <el-form-item>
          <ElInput v-model="queryInfo.filename" placeholder="文件名称模糊查询"></ElInput>
        </el-form-item>
        <el-form-item>
          <ElSelect v-model="queryInfo.contentType" placeholder="文件类型">
            <ElOption v-for="d in types" :key="d.type" :value="d.type" :label="d.text"></ElOption>
          </ElSelect>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button-group>
        <el-button type="danger" @click="requery"
          ><el-icon><Refresh /></el-icon>重置</el-button
        >
        <el-button type="warning" @click="delSelected" :disabled="multipleSelection.length == 0"
          ><el-icon><CloseBold /></el-icon>删除选中</el-button
        >
        <el-button type="primary" @click="query"
          ><el-icon><Search /></el-icon>查询</el-button
        >
      </el-button-group>
    </div>
    <div>
      <el-button type="success" @click="uploadVisible = true"
        ><el-icon><UploadFilled /></el-icon>上传</el-button
      >
    </div>
  </div>

  <!-- 文件列表 -->
  <div class="info">
    <el-table :data="list" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="fileinfo" label="文件描述信息" />
      <el-table-column prop="filename" label="原始文件名" />
      <el-table-column prop="contentType" label="文件类型" />
      <el-table-column label="文件大小">
        <template #default="scope">
          {{ FileTools.formatFileSize(scope.row.filesize) }}
        </template>
      </el-table-column>
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)" size="small">删除</el-button>
          <el-button type="primary" @click="showPreview(scope.row)" size="small">预览</el-button>
          <el-button type="success" @click="copyurl(scope.row)" size="small">复制文件地址</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>

  <!-- 文件上传对话框 -->
  <el-dialog v-model="uploadVisible" title="上传文件" @closed="requery">
    <OssUploadComp></OssUploadComp>
  </el-dialog>

  <!-- bucket选择对话框 -->
  <el-dialog v-model="bucketVisible" title="选择bucket">
    <OssBucketComp @bucket-selected="bucketSelected"></OssBucketComp>
  </el-dialog>

  <!--文件预览 -->
  <el-dialog v-model="previewVisible" title="文件预览" @closed="removePreview">
    <OssPreviewComp :ossinfo="preview"></OssPreviewComp>
  </el-dialog>

  <BackToHome />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElTable, ElMessageBox, ElButton, ElButtonGroup, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage, ElDialog } from 'element-plus'
import OssUploadComp from '../../components/OssUploadComp.vue'
import { TbOssBucket, TbOssInfo } from '../../ts/types/Oss'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { FileTools } from '../../ts/FileTools'
import { ApiService } from '../../ts/ApiService'
import PageComp from '../../components/PageComp.vue'
import { Tools } from '../../ts/Tools'
import { log } from '../../ts/logger'
import OssBucketComp from '../../components/OssBucketComp.vue'
import OssPreviewComp from '../../components/OssPreviewComp.vue'
import BackToHome from '../../components/BackToHomeComp.vue'
const multipleSelection = ref<TbOssInfo[]>([])

const handleSelectionChange = (val: TbOssInfo[]) => {
  multipleSelection.value = val
  log.debug('表格选择项：', val)
}

const delSelected = () => {
  log.debug('删除的信息：', multipleSelection)
  ElMessageBox.confirm(`是否删除所有选中的文件`).then(() => {
    let ids = multipleSelection.value
      .map((info: TbOssInfo) => {
        return info.oiid
      })
      .join(',')
    ApiService.delete(`/oss/info/deleteIds/${ids}`, {}, (data: BaseResult) => {
      requery()
      ElMessage({
        message: data.message,
        icon: data.success ? 'info' : 'error',
      })
    })
  })
}

const del = (info: TbOssInfo) => {
  log.debug('删除的信息：', info)
  ElMessageBox.confirm(`是否删除文件：${info.filename}？`).then(() => {
    ApiService.delete(`/oss/info/${info.oiid}`, {}, (data: BaseResult) => {
      requery()
      ElMessage({
        message: data.message,
        icon: data.success ? 'info' : 'error',
      })
    })
  })
}

const previewVisible = ref(false)
const preview = ref({} as TbOssInfo)

const removePreview = () => {
  preview.value = {} as TbOssInfo
}

const showPreview = (info: TbOssInfo) => {
  preview.value = info
  previewVisible.value = true
}

import { BASE_URL } from '../../ts/ApiService'

const copyurl = (info: TbOssInfo) => {
  Tools.copyText(`${BASE_URL}/oss/info/url/${info.oiid}`)
  ElMessage.success('已经复制地址到剪贴板')
}

const uploadVisible = ref(false)

const bucketVisible = ref(false)

const bucketInfo = ref({ info: '请选择bucket...' } as TbOssBucket)

const bucketSelected = (info: TbOssBucket) => {
  log.debug('选择的bucket', info)
  bucketInfo.value = info
  queryInfo.value.obid = info.obid
  bucketVisible.value = false
}

const queryInfo = ref({ contentType: '' } as TbOssInfo)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref<Array<TbOssInfo>>([])

const types = [
  { type: '', text: '全部文件类型' },
  { type: 'image/', text: '图片文件' },
  { type: 'audio/', text: '音频文件' },
  { type: 'video/', text: '视频文件' },
]

const requery = () => {
  queryInfo.value = { contentType: '' } as TbOssInfo
  page.value = { pageNumber: 1, pageSize: 10 } as PageBean
  bucketInfo.value = { info: '请选择bucket...' } as TbOssBucket
  query()
}

const query = () => {
  ApiService.get(`/oss/info/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (data: BaseDataResult<BasePageVO<Array<TbOssInfo>>>) => {
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessage.error(data.message)
  })
}

query()
</script>
<style scoped lang="scss">
.menus {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  > div {
    margin-left: 0.2rem;
  }
}
</style>
